<template>
    <!-- 头信息 -->
    <div class="ms-3">


        <div class="mt-2 ">
            <span class="fs-5">{{ drillHole.code }}</span>
            <el-tag size="small" class="mx-2"
                :type="drillHole.status === '未开始' ? 'info' : drillHole.status === '进行中' ? '' : drillHole.status === '已完成' ? 'success' : 'danger'">{{
                    drillHole.status }}</el-tag>
        </div>


        <div class="mt-2 ">
            <div v-for="(item, index) in (drillHole as any).ewDrillholeInfos" :key="item.id">
                <li class="text-danger fs-7" v-show="item.type == 0 || item.type == 1">
                    {{ item.info }}
                </li>
            </div>
           
            <div v-for="(item, index) in (drillHole as any).ewDrillholeInfos" :key="item.id">
                <li class="text-dark fs-7" v-show=" item.type == 4">
                    {{ item.info }}
                </li>
            </div>
        </div>
        <span v-if="drillHole.openTime">
            <span class="fw-lighter fs-7">
                <i class="bi bi-geo-alt-fill text-black-50 "></i>
                开孔偏离距离</span>
            <span class="fs-7">{{ drillHole.openExcursion }} 米</span>
            <span class="fs-7" :style="{ color: excursionDistanceStatusColor }">( {{ excursionDistanceStatus }} )</span>
        </span>
        <div class="w-100" v-if="drillHole.openDescription">
            <span class="fs-7 text-secondary"> 偏离原因: <span class="text-dark">{{ drillHole.openDescription }}</span> </span>

        </div>
    </div>
    <!-- 基本信息 -->
    <div class="m-2">
        <div class="w-100">
            <span class="fs-65"> <i class="text-primary bi bi-circle-fill"></i> 基本信息 </span>
        </div>
        <div class="mt-2 mb-2 w-100 rounded d-flex justify-content-center align-items-start flex-column"
            style="background-color: #e8edff; height: ;">
            <div class=" ms-4 mt-4 fs-65 text-black-75"> 钻孔类型: {{ drillHole.type }} </div>
            <div class=" ms-4 mt-1 fs-65 text-black-75"> 设计坐标X: {{ drillHole.coordinateDesignX }}</div>
            <div class=" ms-4 mt-1 fs-65 text-black-75"> 设计坐标Y: {{ drillHole.coordinateDesignY }}</div>
            <div class=" ms-4  mt-1 fs-65 text-black-75"> 设计深度: {{ drillHole.designDepth }}米</div>
            <div class=" ms-4  mt-1  fs-65 text-black-75"> 设计要求: {{ drillHole.designRequirements }} </div>
            <div class=" ms-4  mt-1 fs-65 text-black-75"> 领取人: {{name }} </div>

            <div class=" ms-4  mt-1 mb-4 fs-65 text-black-75"> 位置类型: {{ drillHole.locationType }} </div>
            

        </div>



    </div>
    <!-- 开孔照片 -->
    <div class="m-2" v-if="drillHole.openTime">
        <div class="w-100">
            <span class="fs-65"> <i class="text-primary bi bi-circle-fill"></i> 孔位照片 </span>
        </div>
        <div class="w-100">
            <span class="fs-7 text-black-75"> <i class="bi bi-alarm"></i> {{ useConvert().toDatetimeAll(drillHole.openTime)
            }} </span>
        </div>

        <div class="w-100" style="display: flex; flex-direction: row;">
            <!-- //暂时隐藏 -->
            <!-- <el-image  /> -->
            <div v-for="(item, index) in srcList" class="m-2" style="width: 90px; height: 60px" :src="item">
                <uk-image @click="currentIndex = index" :src="item" :preview-src-list="srcList" :initial-index="currentIndex"
                    :zoom-rate="1.2" fit="cover">

                </uk-image>
            </div>

        </div>
        <div v-if="videoList.length != 0">
            <div class="w-100">
                <span class="fs-65"> <i class="text-primary bi bi-circle-fill"></i> 孔位视频 </span>
            </div>
            <div class="w-100" style="display: flex; flex-direction: row;">
                <!-- //暂时隐藏 -->
                <!-- <el-image v-for="(item,index) in srcList" class="m-2" style="width: 90px; height: 60px" :src="item" :zoom-rate="1.2" 
                :initial-index="4" fit="cover" /> -->
                <div v-eles class="image-div" style="width: 140px;  height: 100px;margin-left: 10px;" v-for="(item, index) in videoList">
                
                        <uk-video :src="item" @clickVideo="openVide(item)"></uk-video>
              
                    <!-- <video   ></video> -->
                </div>
                <!-- <video id="media"  :src="item" controls width="400px" heigt="400px"></video>   -->
            </div>
        </div>

    </div>
    <div class="m-2">
        <div class="w-100">
            <span class="fs-65"> <i class="text-primary bi bi-circle-fill"></i> 测量信息 </span>
        </div>
        <div class="mt-2 mb-4 w-100 rounded d-flex justify-content-center align-items-start flex-column"
            style="background-color: #e8edff; height: ;">
            <!-- <div class=" ms-4 mt-4 fs-65 text-black-75"> 测量偏离距离: {{ drillHole.type }} </div> -->
            <div class=" ms-4 mt-2 fs-65 text-black-75"> 测量坐标X: {{ drillHole.coordinateMeasureX }}</div>
            <div class=" ms-4 mt-1 fs-65 text-black-75"> 测量坐标Y: {{ drillHole.coordinateMeasureY }}</div>
            <div class="ms-4 mt-1 fs-65 text-black-75" v-if="drillHole.locationType == '水面'"> 水深: {{
                drillHole.measureWaterDepth }} </div>
            <div class=" ms-4 mt-1 fs-65 text-black-75" v-if="drillHole.locationType == '水面'"> 水面高程: {{
                drillHole.waterAltitude }}</div>

            <div class="  ms-4  mt-1 mb-4 fs-65 text-black-75"> 孔口高程: {{ drillHole.altitude }}</div>

        </div>



    </div>
    <el-dialog v-model="videoDialogVisible" title="视频详情" width="600" :append-to-body="true" style="border-radius: 10px"
        center destroy-on-close>
        <div class="w-100 d-flex justify-content-center">
            <iframe width="500" height="500" :src="currentVideoSrc"></iframe>

        </div>

        <template #footer>
            <span>
                <el-button type="primary" @click="videoDialogVisible = false">关闭</el-button>
            </span>
        </template>
    </el-dialog>
</template>
    
<script setup lang='ts'>

import ukVideo from '@/components/common/uk-video/uk-video.vue';
import ukImage from '@/components/common/uk-image/uk-image.vue';
import { ElDialog } from 'element-plus';
import { useRvo } from '@/hook/useRvo';
import API from '@/network/api';
import _ from 'lodash';
import { PropType } from 'vue';

import { useConvert } from "@/hook/useConvert";
import { useStore } from "vuex";


export interface BoreOpenVO {
    id?: string
    code?: string
    type?: string
    status?: string
    coordinateDesignX?: number
    coordinateDesignY?: number
    designDepth?: number
    designRequirements?: string
    openVideo?: string
    openImage?: string
    designExcursionDepth?: number
    designExcursionDistance?: number
    openExcursion?: number
    openTime?: string
    openDescription?: string
    locationType?: string
    altitude?: string
    coordinateMeasureX?: string
    coordinateMeasureY?: string
    measureWaterDepth?: string
    waterAltitude?: string
}
const store = useStore();
let videoDialogVisible = ref(false)
let currentIndex = ref(0)
const drillHole = ref({} as BoreOpenVO)
const name =ref()
const baseUrl = store.getters['getOssAliuncs']
const url = ref("")
const srcList = ref([])
const videoList = ref([])
let currentVideoSrc = ref("")

const props = defineProps({
    drillHoleId: {
        type: String,
        default: ""
    }

})
const getUser=async(e:any)=>{
    if(!e)return
	const memberVo = {
		id: e,
	}
	let res = await API.user.getMemberById(memberVo)
	 name.value =(res as any).data.userList[0].fullName
}
const excursionDistanceStatus = ref("正常");
const excursionDistanceStatusColor = ref("green")

watch(props, (newX) => {
    getDrillHole()
})


const getDrillHole = async () => {
    let idRvo = useRvo().idRvo;
    idRvo.id = props.drillHoleId;
    let res = await API.drillHoleOpen.getOne(idRvo);
    drillHole.value = res.singleData
    if (drillHole.value.openImage) {
        let images = JSON.parse(drillHole.value.openImage)
        if (images.lenth != 0) {
            for (let index = 0; index < images.length; index++) {
                let item = images[index]
                if (index == 0) {
                    url.value = baseUrl + item
                }

                if (getFileExtension(item) === "mp4") {
                    (videoList.value as any).push(baseUrl + item)
                } else {
                    (srcList.value as any).push(baseUrl + item)
               
                    
                }
            }
        }
    }

    if (drillHole.value.openVideo) {
        let images = JSON.parse(drillHole.value.openVideo)
        if (images.lenth != 0) {
            for (let index = 0; index < images.length; index++) {
                let item = images[index]
                if (index == 0) {
                    url.value = baseUrl + item
                }

                if (getFileExtension(item) === "mp4") {
                    (videoList.value as any).push(baseUrl + item)
                } else {
                    (srcList.value as any).push(baseUrl + item)
                }


            }
        }
    }
    if ((drillHole.value as any).ewDrillholeInfos) {
        excursionDistanceStatus.value = "正常"
        excursionDistanceStatusColor.value = "green"
        for (let index = 0; index < (drillHole.value as any).ewDrillholeInfos.length; index++) {
            const element = (drillHole.value as any).ewDrillholeInfos[index];

            if (element.type == 1) {
                excursionDistanceStatus.value = "偏离"
                excursionDistanceStatusColor.value = "red"
            }

        }
    }

    let resinfo = await API.drillHole.info({
				id:  props.drillHoleId
			}) as any
    getUser(resinfo.singleData.recipientId)
}

const openVide = (item: string) => {
    videoDialogVisible.value = true;
    currentVideoSrc.value = item
}

const getFileExtension = (filename: String) => {
    return filename.split('.').pop();
}

onMounted(() => {


    getDrillHole()




})


</script>
    
<style>
.image-div {
    cursor: pointer;
}
</style>